
<%--
  Created by IntelliJ IDEA.
  User: 何亮龙
  Date: 2020/7/23
  Time: 10:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户后台信息管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="accountName" placeholder="请输入要搜索的用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <%--<div class="layui-inline">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="text" name="email" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>--%>
                <div class="layui-inline">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <select id="accountGender" name="accountGender">
                            <option value="" selected="selected"></option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">用户手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="accountPhone" placeholder="请输入要搜索的用户手机号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="account_list" lay-filter="account_list"></table>
            <script type="text/html" id="table-content-list">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details"><i class="layui-icon layui-icon-edit"></i>查看详情</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
        </div>
        <%--<div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layuiadmin-btn-useradmin" data-type="batchdel">删除</button>
                <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加</button>
            </div>

            <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table>

           &lt;%&ndash; <script type="text/html" id="imgTpl">
                <img style="display: inline-block; width: 50%; height: 100%;" src= {{ d.avatar }}>
            </script>&ndash;%&gt;
            <script type="text/html" id="table-useradmin-webuser">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
        </div>
        --%>
    </div>
</div>

<script src="${pageContext.request.contextPath}/back/layuiadmin/layui/layui.js"></script>
<script>

    layui.config({
        base: '${pageContext.request.contextPath}/back/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['table','laydate','form'], function(){
        var table = layui.table,
            laydate = layui.laydate,
            form = layui.form,
            $ = layui.$;
        var cols = [[ //表头
            {field: 'accountId', title: '用户编号', sort: true, width:100, fixed: 'left',templet:'<div>{{d.accountId}}</div>'}
            ,{field: 'accountName', title: '用户名称', sort: true, width:100,templet:'<div>{{d.accountName}}</div>'}
            ,{field: 'accountGender', title: '用户性别', sort: true, width:100,templet:'<div>{{d.accountGender}}</div>'}
            ,{field: 'accountPwd', title: '用户密码', sort: true, width: 290,templet:'<div>{{d.accountPwd}}</div>'}
            ,{field: 'accountPhone', title: '用户手机号', width: 140, sort: true,templet:'<div>{{d.accountPhone}}</div>'}
            ,{field: 'accountPicture', title: '用户头像', width:155, sort: true,templet:'<div>{{d.accountPicture}}</div>'}
            ,{field: 'accountRegTime', title: '用户注册时间', width:180, sort: true,templet:'<div>{{d.accountRegTime}}</div>'}
            ,{field: '', title: '操作', width: 180,toolbar:"#table-content-list"}
        ]];
        table.render({
            elem: '#account_list'
            ,url: '${pageContext.request.contextPath}/back/account' //数据接口
            ,page: true //开启分页
            ,cols: cols
            ,parseData:function(res){
                return {
                    "code": 0, //解析接口状态
                    "msg": "搜索成功", //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.list, //解析数据列表
                };
            }
        });

        table.on("tool(account_list)",function(obj){
            var data = obj.data;
            var accountId = data.accountId;
            if(obj.event == "details")
            {
                layer.open({
                    type: 1
                    ,title:"查看用户详情"
                    ,content:$("#account_details")
                    ,area: ['550px', '550px']
                    ,btn: ['确定', '取消']
                });
                form.val("account_details",data);
                $("#img_accountPicture").prop("src","${pageContext.request.contextPath}/download/img?fileName="+data.accountPicture);
            }else if(obj.event === 'del'){
                layer.confirm('您确定删除用户编号：'+accountId+'的数据吗？', function(index){
                    //向服务端发送删除指令，在这里可以使用Ajax异步
                    $.ajax({
                        type:'delete'
                        ,url:'${pageContext.request.contextPath}/back/delectByAccountId/' + accountId
                        ,dataType:'json'
                        ,success:function(result) {
                            if (result == true) { //删除成功，刷新当前页表格
                                //删除对应行（tr）的DOM结构，并更新缓存
                                obj.del();
                                layer.close(index);
                            } else if (result == false) { //删除失败
                                layer.alert("删除失败");
                            }
                        }
                    });
                });
                // 修改事件
            }
        });

       form.on('submit(search)',function(data){
            var field = data.field;
           console.log(field);
            layer.msg("正在搜索");
            table.render({
                elem: '#account_list'
                ,url: '${pageContext.request.contextPath}/back/account' //数据接口
                ,where:field
                ,page: true //开启分页
                ,cols: cols
                ,parseData:function(res){
                    return {
                        "code": 0, //解析接口状态
                        "msg": "", //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.list, //解析数据列表
                    };
                }
            });
        });

    });
    //获取性别下拉框值
    //1获得下拉框的节点对象；
    var select = document.getElementById("accountGender");
    //2如何获得该下拉框所有的option的节点对象
    var options = select.options;
    //注意：得到的options是一个对象数组
    //5如何获得当前选中的option的索引
    var index = select.selectedIndex;
    //6.如何获得当前选中的option的文本内容？
    //从第2个问题，我们已经获得所有的option的对象数组options了
    //又从第5个问题，我们获取到了当前选中的option的索引值
    //所以我们只要同options[index]下标的方法得到当前选中的option了
    var accountGender = options[index].value;
</script>
</body>
<!-- 添加场次from表单 -->
<div class="layui-form" id="account_details" lay-filter="account_details" style="display:none"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">用户名称</label>
        <div class="layui-input-block">
            <input type="text" disabled name="accountName" id="add_screeningStartTime" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <select name="accountGender" disabled>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-block">
            <input type="text" disabled name="accountPhone" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-block">
            <img src="#" id="img_accountPicture" width="200"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">注册时间</label>
        <div class="layui-input-block">
            <input type="text" required name="accountRegTime" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
</div>
</html>


